<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/9/12
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加管理员</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
    <link rel="icon" href="/static/frame/static/image/code.png">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/roleManagement.css">
    <link id="layuicss-layer" rel="stylesheet" href="file:///C:/Users/Administrator.ITIANKONG/Desktop/cpts_1065_vip-admin/frame/layui/css/modules/layer/default/layer.css?v=3.0.3" media="all">
    <link id="layuicss-laydate" rel="stylesheet" href="file:///C:/Users/Administrator.ITIANKONG/Desktop/cpts_1065_vip-admin/frame/layui/css/modules/laydate/default/laydate.css?v=5.0.2" media="all">
    <style>
        .showmessages{
            width: 460px;
            margin-top: 80px;
        }
        label.error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body class="body">
<div class="pageall">
    <div class="backphall">
        <div class="titleall">
            <div class="titleph">
                <img src="${pageContext.request.contextPath}/static/images/role.png" style="width:100%;height:100%;"/>
            </div>
            <div class="titleword">管理员管理 >>> 管理员添加</div>
        </div>

        <div class="contentall"></div>
    </div>
    <div class="showmessages">
        <form action="adminAddController.do" onsubmit="return validate()"  method="post" class="layui-form" id="f">
            <table style="width:800px;height: 360px;">
                <tr><td style="text-align: right;">账号：</td><td><input type="text" style="height: 30px;width: 400px;" name="admin_username" placeholder="请输入账号/特殊字符无效"></td></tr>
                <tr><td style="text-align: right">密码：</td><td><input type="password" style="height: 30px;width: 400px;" name="admin_password" placeholder="请输入密码"></td></tr>
                <tr><td style="text-align: right">姓名：</td><td><input type="text" style="height: 30px;width: 400px;" name="admin_name" placeholder="请输入姓名/特殊字符无效"></td></tr>
                <tr><td style="text-align: right">手机号码：</td><td><input type="text" style="height: 30px;width: 400px;" name="admin_phone" placeholder="请输入手机号"></td></tr>
                <tr><td style="text-align: right">选择角色：</td><td>
                    <select name="charName" id="selectText">
                        <option>请选择角色</option>
                        <c:forEach items="${rolelist}" var="o">
                            <option>${o.getCharacter_name()}</option>
                        </c:forEach>
                    </select></td><td><label id="label" style="display: none;color: red;font-size: 14px">必须选择角色</label></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td></td><td style="margin: 0 auto"><input type="submit" class="layui-btn"  value="添加"></td></tr>
            </table>
        </form>

    </div>
</div>

</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/frame/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/frame/static/js/vip_comm.js"></script>

<script>
    /*
    通过条件来阻止form表单的提交
    */
    function validate(){
        var selectText=$("#selectText").val();//获取下拉列表框中默认选择的值
        if (selectText=="请选择角色") {
            $("#label").css("display","block");
            return false;
        }else {
            $("#label").css("display","none");
            return true;
        }
    }
    /*
使用jquery validate限制表单
*/
    $.validator.addMethod("wordstyle",function(value,element,params){
        var num1=/^(?!、)(?!.*?、$)[a-zA-Z、\u4e00-\u9fa5]+$/;
        if(params=="true"){
            return num1.test(value);
        }
    },"输入的姓名只能由文字、英文以及“、”组成,且不能以“、”开头和结尾！");
    $.validator.addMethod("wordstyle1",function(value,element,params){
        var num1=/^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
        if(params=="true"){
            return num1.test(value);
        }
    },"输入的账号只能由数字、英文以及下划线组成,且不能以下划线开头和结尾！");
    $.validator.addMethod("checkcode",function(value,element){
        var pattern = new RegExp("[`~!@#$^&*()=|{} ':;,.<>/?~！@#￥……&*（）——|【】‘：”“'。？%+ 　\"\\\\]");
        var specialStr = "";
        for(var i=0;i<value.length;i++){
            specialStr += value.substr(i, 1).replace(pattern, '');
        }
        if( specialStr == value){
            return true;
        }
        return false;
    },"禁止输入特殊字符");
    $.validator.addMethod("userCellphone",function(value,element,params){//传入参数1表示验证手机号码，传入2表示验证座机
        //规则验证方法，这个方法返回false这代表没有通过验证，返回true则表示通过验证
        var phone1=/^1[345789]\d{9}$/;
        var phone2=/^0\d{2,3}-\d{7,8}$/;
        if(params==1){
            return phone1.test(value);
        }else{
            return phone2.test(value);
        }
    },"电话号码必须11位");

    $("#f").validate({
        rules:{
            admin_username:{
                required:true,
                rangelength:[6,12],
                checkcode:true,
                wordstyle1:"true"
            },
            admin_password:{
                required:true,
                rangelength:[6,12],
            },
            admin_name:{
                required:true,
                rangelength:[2,20],
                checkcode:true,
                wordstyle:"true"
            },
            admin_phone:{
                required:true,
                userCellphone:1
            }
        },
        messages:{
            admin_username:{
                required:"账号必须填写",
                rangelength:"长度为6到12位",
                checkcode: "请检查无效字符"
            },
            admin_password:{
                required:"密码必须填写",
                rangelength:"长度为6到12位",
            },
            admin_name:{
                required:"姓名必须填写",
                rangelength:"长度为2到20位",
                checkcode: "请检查无效字符"
            },
            admin_phone:{
                required:"手机号必须填写",
                userCellphone:"必须为正确的手机号"
            }
        }
    });
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
    });

</script>

</html>
